<template>
    <div class="quantum-well file-info">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="content">
                    <div class="structure-tree">
                        <div class="form">
                            <pui-tree :dataList="componentRef.structureTree"></pui-tree>
                        </div>
                    </div>
                    <div class="structure">
                        <div class="btn-box">
                            <pui-button @click="showMaterial">材料</pui-button>
                            <pui-button @click="showDepth">厚度</pui-button>
                            <pui-button @click="showDopant">掺杂</pui-button>
                        </div>
                        <div class="form">
                            <div class="form-item">
                                <div class="label">周期性:</div>
                                <pui-radio-group v-model="componentRef.structure.cycle" :list="componentRef.boolean"></pui-radio-group>
                            </div>
                            <div class="form-item" v-show="componentRef.structure.cycle === '1'">
                                <div class="label">周期:</div>
                                <input class="pui-input" placeholder="请输入" v-model="componentRef.structure.waveLength" />
                            </div>
                            <div class="form-item">
                                <div class="label bold">P-N结所在位置:</div>
                            </div>
                            <div class="form-item">
                                <div class="label">P:</div>
                                <input class="pui-input" placeholder="请输入" v-model="componentRef.structure.p" />
                            </div>
                            <div class="form-item">
                                <div class="label">N:</div>
                                <input class="pui-input" placeholder="请输入" v-model="componentRef.structure.n" />
                            </div>
                            <div class="form-item">
                                <div class="label bold">最边界垒层位置:</div>
                            </div>
                            <div class="form-item">
                                <div class="label">最高层:</div>
                                <input class="pui-input" placeholder="请输入" v-model="componentRef.structure.top" />
                            </div>
                            <div class="form-item">
                                <div class="label">最低层:</div>
                                <input class="pui-input" placeholder="请输入" v-model="componentRef.structure.bottom" />
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button @click="submitHandle" type="primary">确定</pui-button>
                <pui-button @click="closeDialog">取消</pui-button>
            </template>
        </pui-dialog>
    </div>
    <DepthDialog ref="DepthDialogRef" />
    <DopantDialog ref="DopantDialogRef" />
    <MaterialDialog ref="MaterialDialogRef" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'MaterialCustom'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, watch } from 'vue'
import DepthDialog from './QuantumWellDepth.vue'
import DopantDialog from './QuantumWellDopant.vue'
import MaterialDialog from './QuantumWellMaterial.vue'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '横向结构设计-有源区设计-量子阱MQW'
    },
    animate: {
        type: String,
        default: 'fade'
    }
})
const emit = defineEmits({
    onClose: (val: any) => {}
})
const componentRef = reactive({
    dialogVisible: false,
    material: {},
    structureTree: [
        {
            label: '量子阱结构',
            value: '-1',
            children: [
                {
                    label: 'Line1',
                    value: 'Line1',
                },
                {
                    label: 'Line2',
                    value: 'Line2',
                },
                {
                    label: 'Line3',
                    value: 'Line3',
                },
            ]
        }
    ],
    structure: {
        cycle: '0',
        waveLength: 300,
        p: 300,
        n: 300,
        top: 300,
        bottom: 300
    },
    boolean: [
        {
            label: '否',
            value: '0'
        },
        {
            label: '是',
            value: '1'
        }
    ]
}) as any
const init = () => {
    componentRef.dialogVisible = true
}
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}
const submitHandle = () => {

}

const showMaterial = () => {
    proxy.$refs.MaterialDialogRef.init()
}
const showDepth = () => {
    proxy.$refs.DepthDialogRef.init()
}
const showDopant = () => {
    proxy.$refs.DopantDialogRef.init()
}

defineExpose({
    init
})
</script>
<style lang="scss">
@import '../fileControl/fileStyle.scss';
</style>